<template>
  <div class="login-summary">
    <el-form :inline="true" ref="searchForm" :model="searchForm">
      <el-form-item label="姓名:">
        <el-input v-model="searchForm.userName" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="时间:" label-width="50px">
        <el-date-picker
          v-model="searchData"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item prop="deptId" label="部门" label-width="50px">
        <el-cascader
          placeholder="点击选择部门"
          :options="deptList"
          v-model="searchForm.deptId"
          :props="deptListTreeProps"
          filterable
          clearable
          change-on-select
        />
      </el-form-item>
<!--      <el-form-item>-->
<!--        <el-radio-group v-model="form.quesDisorder" :disabled="!!form.courseStatus">-->
<!--          <el-radio :label="0">否</el-radio>-->
<!--          <el-radio :label="1">是</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="状态" prop="quesDisorder">-->
<!--        <el-radio-group v-model="searchForm.loginStatus">-->
<!--          <el-radio :label="0">在线</el-radio>-->
<!--          <el-radio :label="1">离线</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="loadSummaryList(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="summaryList" border style="width:100%">
      <el-table-column align="center" type="index" label="序号"></el-table-column>
      <el-table-column align="center" prop="createTime" label="时间"></el-table-column>
      <el-table-column align="center" prop="realname" label="姓名"></el-table-column>
      <el-table-column align="center" prop="deptName" label="部门"></el-table-column>
      <el-table-column align="center" prop="clientType" label="设备">
        <template slot-scope="scope">{{clientTypes[scope.row.clientType]}}</template>
      </el-table-column>
<!--      <el-table-column align="center" prop="loginStatus" label="在线状态">-->
<!--        <template slot-scope="scope">-->
<!--          <span v-if="scope.row.loginStatus == 1">在线</span>-->
<!--          <span v-if="scope.row.loginStatus == 2">离线</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column align="center" prop="loginStatus" label="登录状态">
        <template slot-scope="scope">
          <span v-if="scope.row.loginStatus == 1">登录</span>
          <span v-if="scope.row.loginStatus == 2">退出</span>
        </template>
      </el-table-column>
<!--      <el-table-column align="center" label="操作">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="text" @click="remove(scope.row.id)">删除</el-button>-->
<!--        </template>-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="text" @click="kickout(scope.row.userId)">踢出</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="marginTop:20px;textAlign:left;"
      @size-change="pageSizeChange"
      @current-change="pageIndexChange"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      :total="totalCount"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
  import {treeDataTranslate} from '@/utils'
  export default {
    name: 'loginSummary',
    data() {
      return {
        searchForm: {
          userName: '',
          startTime: '',
          endTime: '',
          deptId: ''
        },
        searchData: [],
        clientTypes: ['', '安卓', '苹果', '其他'],
        summaryList: [],
        deptList: [],
        pageIndex: 1,
        pageSize: 10,
        deptListTreeProps: {
          checkStrictly: true,
          expandTrigger: 'click',
          label: 'name',
          value: 'id',
          children: 'children',
          emitPath: false
        },
        totalCount: 0
      }
    },
    mounted() {
      this.$http({
        url: this.$http.adornUrl('/usercenter-admin/dept/list'),
        method: 'post'
      }).then(res => {
        this.deptList = treeDataTranslate(
          res.data.filter(item => item.parentId !== -1),
          'id'
        )
      })
    },
    methods: {
      loadSummaryList(page) {
        if (page) this.pageIndex = page
        if (this.searchData && this.searchData.length) {
          this.searchForm.startTime = `${this.searchData[0]}`
          this.searchForm.endTime = `${this.searchData[1]}`
        } else {
          this.searchForm.startTime = ''
          this.searchForm.endTime = ''
        }
        this.$http.post('/usercenter-admin/user/getLoginList', {
          page: this.pageIndex,
          limit: this.pageSize,
          userName: this.searchForm.userName,
          startTimeStr: this.searchForm.startTime,
          endTimeStr: this.searchForm.endTime,
          deptId: this.searchForm.deptId
        }).then(res => {
          this.summaryList = res.data.list
          this.totalCount = res.data.totalCount
        })
      },

      async kickout(userId) {
        let confirm = await this.$confirm('您确认踢出该用户吗？', '提示')
        if (!confirm) return
        let res = await this.$http.post('/auth/kickOutUser', {userId: userId})
        if (res && res.code === 200) {
          this.$notify.success({title: '成功', message: '踢出成功'})
          this.pageIndex > 1 && this.summaryList.length <= 1 && this.pageIndex--
          this.loadSummaryList()
        } else {
          this.$notify.error({title: '错误', message: res.msg})
        }
      },
      deleteHandle(id) {
        this.$confirm(`您确认踢出该用户吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/auth/kickOutUser'),
            method: 'post',
            data: { id: id }
          }).then(res => {
            if (res && res.code === 200) {
              this.getDataList()
              this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
              })
            } else {
              this.$notify.error({
                title: '提示',
                message: res.msg
              })
            }
          })
        })
      },
      async remove(id) {
        let confirm = await this.$confirm('您确认删除此条记录吗？', '提示')
        if (!confirm) return
        let res = await this.$http.post('/usercenter-admin/user/deleteLoginInfo', {id: id})
        if (res && res.code === 200) {
          this.$notify.success({title: '成功', message: '删除记录成功'})
          this.pageIndex > 1 && this.summaryList.length <= 1 && this.pageIndex--
          this.loadSummaryList()
        } else {
          this.$notify.error({title: '错误', message: res.msg})
        }
      },
      pageSizeChange(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.loadSummaryList()
      },
      pageIndexChange(val) {
        this.pageIndex = val
        this.loadSummaryList()
      }
    },
    created() {
      this.loadSummaryList()
    }
  }
</script>

<style>
</style>
